#quiz-controls, #quiz-results-screen { text-align: center } #quiz-header { text-align: left } #quiz-counter { text-align: right } .index-container { background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); font-family: „HarrisonSerifPro“; } .image-container { position: relative; text-align: center; color: white; } /* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 16px; } .question { font-size: 1.25em; background: #000; color: #ffe600 } #quiz-results { font-size: 1.25em; font-weight: bold; } #resultScore { font-size: 2.25em; font-weight: bold; color: #28a0f9; display: inline; } .quiz-container { padding : 1em; max-width: 100%; margin : 1em auto } .quiz-container a { text-decoration: none; color : #333 } .answers { list-style: none; padding : 0 } .answers a { display : block; padding : .5em 1em; margin-bottom: .5em; background : #fff; border-radius: 10px } .answers a:hover { display : block; padding : .5em 1em; margin-bottom: .5em; background : #ffe60041; border-radius: 10px } .answers a.correct { background: #090; font-weight: bold; } .correctAnimated{ background-color: #090 !important; font-weight: bold; background-image:none !important; -webkit-transition: background-color 2000ms linear; -moz-transition: background-color 2000ms linear; -o-transition: background-color 2000ms linear; -ms-transition: background-color 2000ms linear; transition: background-color 2000ms linear; -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate; -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ animation-iteration-count: 2; } .answers a.incorrect { background: #c00 } .incorrectAnimated{ background-color: #fff !important; color: rgba(68, 70, 68, 0.384) !important; background-image:none !important; -webkit-transition: color 2000ms linear; -moz-transition: color 2000ms linear; -o-transition: color 2000ms linear; -ms-transition: color 2000ms linear; transition: color 2000ms linear; -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate; -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ animation-iteration-count: 2; } .incorrectCheckedAnimated{ background-color: rgba(204, 0, 0, 0.466) !important; background-image:none !important; -webkit-transition: background-color 2000ms linear; -moz-transition: background-color 2000ms linear; -o-transition: background-color 2000ms linear; -ms-transition: background-color 2000ms linear; transition: background-color 2000ms linear; -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate; -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ animation-iteration-count: 2; } #quiz-buttons a, #quiz-controls, .quiz-container .quiz-button { padding : .5em 1em; background : #333; color : #fff; border-radius: 10px } .answers a.correct, .answers a.incorrect { color: #fff } #quiz-buttons a, .quiz-container .quiz-button { display: inline-block } #quiz-buttons a { background: #fff; color : #333 } .quiz-results-state #quiz-controls { background: 0 0; padding : 0 } .quiz-results-state #quiz-buttons a { background: #333; color : #fff } ! function (a, b, c, d) { „use strict“; a.quiz = function (b, d) { var e = this; e.$el = a(b), e.$el.data(„quiz“, e), e.options = a.extend(a.quiz.defaultOptions, d); var questions = e.options.questions, questionCount = questions.length, k = e.options.resultsScreen, o = e.options.restartButtonText, currentQuestionCount = 1, correctAnswers = 0, r = !1, questionImageLink = e.options.imageLink; console.log(k); e.methods = { init: function () { e.methods.setup(), a(c).on(„click“, „.answers a“, function (a) { a.preventDefault(), e.methods.answerQuestion(this) }), a(c).on(„click“, „#quiz-restart-btn, #quiz-retry-btn“, function (a) { a.preventDefault(), e.methods.restart() }) }, setup: function () { var b = „“; e.options.counter && (b += ‚‚), b += ‚„, 0 === a(k).length && (b += ‚„), b += ‚„, e.$el.append(b).addClass(„quiz-container quiz-questions-state“), a(„#quiz-counter“).show(), a(„.question-container“).hide(), a(k).hide(), a(„#quiz-controls“).hide(), a(„#quiz-restart-btn“).hide(), a(„#questions“).show(), a(„.question-container:first-child“).show().addClass(„active-question“), e.methods.updateCounter(); }, answerQuestion: function (b) { if (!r) { r = !0; var selectedAnwser = a(b), selectedIndex = selectedAnwser.data(„index“), currentQuestionIndex = currentQuestionCount – 1, correctIndex = questions[currentQuestionIndex].correctIndex, answers = b.parentElement.parentElement.getElementsByTagName(‚a‘); if (selectedIndex === correctIndex) { selectedAnwser.addClass(„correct“); for (var cou = 0, item; item = answers[cou]; cou++) { if (selectedIndex != item.getAttribute(„data-index“)) { a(item).addClass(„incorrectAnimated“); } } correctAnswers++; } else { selectedAnwser.addClass(„incorrect“); for (var cou = 0, item; item = answers[cou]; cou++) { if (cou == correctIndex) { a(item).addClass(„correctAnimated“); } else if (cou != correctIndex && cou != selectedIndex) { a(item).addClass(„incorrectAnimated“); } } selectedAnwser.addClass(„incorrectCheckedAnimated“); } a(„#quiz-controls“).hide(), „function“ == typeof e.options.answerCallback && e.options.answerCallback(currentQuestionCount, selectedIndex, questions[currentQuestionIndex]); setTimeout(function () { if (currentQuestionCount == questionCount) { e.$el.removeClass(„quiz-questions-state“).addClass(„quiz-results-state“), a(„.active-question“).hide().removeClass(„active-question“), a(„#quiz-counter“).hide(), a(„#quiz-response“).hide(), a(„#quiz-next-btn“).hide(), a(„#quiz-restart-btn“).show(), a(k).show(); var b = e.options.resultsFormat.replace(„%score“, correctAnswers).replace(„%total“, questionCount); var scorePercent = (correctAnswers/questionCount).toFixed(2); if(scorePercent == 1){ b += e.options.excellentScore; } else if(scorePercent >= 0.5) { b += e.options.goodScore; } else { b += e.options.badScore; } a(„#quiz-results“).html(b), a(„#quiz-controls“).fadeIn(), „function“ == typeof e.options.finishCallback && e.options.finishCallback() } else { r = !1, a(„.active-question“).hide().removeClass(„active-question“).next(„.question-container“).show().addClass(„active-question“), a(„#quiz-controls“).hide(), ++currentQuestionCount === selectedIndex && (a(„#quiz-next-btn“).hide(), a(„#quiz-finish-btn“).show()), e.methods.updateCounter(), „function“ == typeof e.options.nextCallback && e.options.nextCallback() } }, 3000); } }, restart: function () { e.methods.reset(), e.$el.addClass(„quiz-questions-state“), a(„#questions“).show(), a(„#quiz-counter“).show(), a(„.question-container:first-child“).show().addClass(„active-question“), e.methods.updateCounter() }, reset: function () { r = !1, currentQuestionCount = 1, correctAnswers = 0, a(„.answers a“).removeClass(„correct incorrect correctAnimated incorrectAnimated incorrectCheckedAnimated“), e.$el.removeClass().addClass(„quiz-container“), a(„#quiz-restart-btn“).hide(), a(k).hide(), a(„#quiz-controls“).hide(), a(„#quiz-response“).show(), a(„#quiz-next-btn“).show(), a(„#quiz-counter“).hide(), a(„.active-question“).hide().removeClass(„active-question“) }, updateCounter: function () { var b = e.options.counterFormat.replace(„%current“, currentQuestionCount).replace(„%total“, questionCount); a(„#quiz-counter“).html(b) } }, e.methods.init() }, a.quiz.defaultOptions = { allowIncorrect: !0, counter: !0, counterFormat: „%current/%total“, resultsScreen: „#quiz-results-screen“, restartButtonText: „Neustart“, resultsFormat: „

%score

/%total

„, badScore : „Erfolgsfan! Du verlässt wahrscheinlich auch deutlich vor Schlusspfiff das Stadion, selbst wenn das Spiel noch nicht entschieden ist.“, goodScore: „Durchschnittsfan! Nach oben geht nicht viel, um den Klassenerhalt musst Du Dir rein quiztechnisch aber auch keine Gedanken machen.“, excellentScore: „Stadiongänger! Durch Deine Adern fließt definitiv schwarzgelbes Blut, Du bist ein Fan der besonderen Art.“, imageLink: „https://img.playbuzz.com/image/upload/ar_1.5,c_crop/q_auto:good,f_auto,fl_lossy,w_640,c_limit,dpr_1.5/v1596807313/nke1kb182mqyn0ju2xqh.jpg“ }, a.fn.quiz = function (b) { return this.each(function () { new a.quiz(this, b) }) } }(jQuery, window, document); $(‚#quiz‘).quiz({ counterFormat: ‚%current / %total‘, questions: [ { ‚q‘: ‚1.) Bei welchem anderen deutschen Verein spielte Stephane Chapuisat?‘, ‚options‘: [ ‚Bayer Leverkusen‘, ‚Bayer Uerdingen‘, ‚Wattenscheid 09‘, ‚MSV Duisburg‘ ], ‚correctIndex‘: 1 }, { ‚q‘: ‚2.) Von welchem chilenischen Verein wechselte Lucas Barrios einst nach Dortmund?‘, ‚options‘: [ ‚CDS Colo-Colo‘, ‚Everton‘, ‚O Higgins‘, ‚Audax Italiano La Florida‘ ], ‚correctIndex‘: 0 }, { ‚q‘: ‚3.) Frank Mill war nicht ein abgezockter Stürmer, sondern ist auch ausgebildeter…?‘, ‚options‘: [ ‚Dachdecker‘, ‚Florist‘, ‚Bürokaufmann‘, ‚Glaser‘ ], ‚correctIndex‘: 1 }, { ‚q‘: ‚4.) Bei seinem Bundesliga-Debüt gelang Pierre-Emerick Aubameyang ein Dreierpack. Gegen welchen Gegner?‘, ‚options‘: [ ‚Eintracht Braunschweig‘, ‚SpVgg Greuther Fürth‘, ‚Hamburger SV‘, ‚FC Augsburg‘ ], ‚correctIndex‘: 3 }, { ‚q‘: ‚5.) Erling Haaland wurde in England (sein Vater spielte dort) geboren. Wo erblickte der Norweger das Licht der Welt?‘, ‚options‘: [ ‚Sunderland‘, ‚Nottingham‘, ‚Leeds‘, ‚Manchester‘ ], ‚correctIndex‘: 2 }, { ‚q‘: ‚6.) Robert Lewandowskis Frau, Anna, ist in einer Kampfsportart zuhause. In welcher?‘, ‚options‘: [ ‚Karate‘, ‚Judo‘, ‚Kung Fu‘, ‚Jiu Jitsu‘ ], ‚correctIndex‘: 0 }, { ‚q‘: ‚7.) Für den BVB traf Manfred Burgsmüller wie am Fließband. Wo wurde er zum Ende seiner Karriere aber auch Deutscher Meister?‘, ‚options‘: [ ‚Hamburger SV‘, ‚Werder Bremen‘, ‚VfB Stuttgart‘, ‚1. FC Kaiserslautern‘ ], ‚correctIndex‘: 1 }, { ‚q‘: ‚8.) Seit vielen Jahren ist Ex-Borusse Heiko Herrlich als Trainer unterwegs. Was war seine erste Station?‘, ‚options‘: [ ‚VfL Bochum‘, ‚SSV Jahn Regensburg‘, ‚U17 Deutschland‘, ‚U19 Borussia Dortmund‘ ], ‚correctIndex‘: 3 }, { ‚q‘: ’09.) Bevor Jan Koller die Bundesliga eroberte, war er in welchem Land kaum zu stoppen?‘, ‚options‘: [ ‚Österreich‘, ‚Belgien‘, ‚Frankreich‘, ‚Schweiz‘ ], ‚correctIndex‘: 1 } ] });